<template>
  <div class="container" v-if="$route.path === '/canteen/feedback'">
    <div class="header">
      <div class="hd-left">
        <el-form :model="searchForm" inline ref="searchRef">
          <el-form-item label="反馈人" prop="name">
            <el-input
              v-model="searchForm.name"
              size="small"
              placeholder="请输入反馈人"
              style="width: 160px"
            ></el-input>
          </el-form-item>
          <el-form-item label="创建时间" prop="startTime">
            <el-date-picker
              size="small"
              style="margin-right: 10px"
              v-model="searchForm.startTime"
              type="datetime"
              placeholder="开始时间"
              value-format="YYYY-MM-DD HH:mm:ss"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item prop="endTime">
            <el-date-picker
              size="small"
              v-model="searchForm.endTime"
              type="datetime"
              placeholder="结束时间"
              value-format="YYYY-MM-DD HH:mm:ss"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-select
              v-model="searchForm.status"
              placeholder="请选择"
              size="small"
              style="width: 160px"
            >
              <el-option
                v-for="item in statusOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <TsButton
              perms="opinion:initiator:page"
              type="primary"
              size="small"
              icon="el-icon-search"
              style="margin-left: 5px"
              @click="search"
              label="搜索"
            ></TsButton>
            <el-button size="small" icon="el-icon-refresh-right" @click="reset"
              >重置</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!--    表格区域-->
    <div class="table" style="height: calc(100% - 160px); overflow-y: auto">
      <el-table
        ref="multipleTable"
        :header-cell-style="{ background: '#FEF6F6' }"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column label="反馈人" prop="nickname"></el-table-column>
        <el-table-column label="描述" prop="content" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="创建时间" prop="createTime"></el-table-column>
        <el-table-column label="所属食堂" prop="canteenName"></el-table-column>
        <el-table-column label="反馈渠道" prop="channelName"> </el-table-column>
        <el-table-column label="所属类型" prop="typeName"> </el-table-column>
        <el-table-column label="状态" prop="status" sortable>
          <template #default="scope">
            <el-tag v-if="scope.row.status === 0" type="danger" size="small"
              >审核中
            </el-tag>
            <el-tag v-if="scope.row.status === 1" type="primary" size="small"
              >处理中
            </el-tag>
            <el-tag v-if="scope.row.status === 2" type="primary" size="small"
              >已完结
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button
              icon="el-icon-info"
              size="small"
              type="text"
              label=""
              @click="detail(scope.row.id)"
              >详情</el-button
            >
            <el-button
              v-show="
                userId === scope.row.currentHandlerId && scope.row.status === 1
              "
              icon="el-icon-s-finance"
              type="text"
              @click="handle(scope.row)"
              >处理</el-button
            >
            <TsButton
              v-show="scope.row.status === 0"
              icon="el-icon-s-promotion"
              label="发起"
              type="text"
              perms="opinion:initiator:detail"
              @click="handle(scope.row)"
            ></TsButton>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
      style="float: right; margin: 20px"
      @size-change="pageSizeChange"
      @current-change="pageCurrentChange"
      :current-page="pageNum"
      :page-size="pageSize"
      layout=" prev, pager, next"
      :total="totalNum"
      background
    >
    </el-pagination>
  </div>
  <router-view></router-view>
</template>

<script>
import feedback from "@/composables/canteen/feedback";
import commonPageRepository from "../../../composables/common-page-repository";
import TsButton from "../../../components/TsButton";

export default {
  name: "Feedback",
  components: { TsButton },
  setup() {
    const {
      userId,
      tableData,
      detail,
      handle,
      pageNum,
      pageSize,
      totalNum,
      getFeedList,
      searchForm,
      statusOptions,
      search,
      searchRef,
      reset,
      opinionSecond,
    } = feedback();
    const { pageSizeChange, pageCurrentChange } = commonPageRepository(
      pageSize,
      pageNum,
      getFeedList
    );
    return {
      userId,
      tableData,
      detail,
      handle,
      pageNum,
      pageSize,
      totalNum,
      pageSizeChange,
      pageCurrentChange,
      searchForm,
      statusOptions,
      search,
      searchRef,
      reset,
      opinionSecond,
    };
  },
};
</script>

<style scoped lang="scss">
.container {
  height: calc(100vh - 220px);
  margin: 20px 0;
  padding: 20px;
  border-radius: 6px;
  overflow-y: auto;
  box-shadow: 0px 0px 16px rgba(96, 96, 96, 0.16);
  background: #ffffff;

  .header {
    display: flex;
    justify-content: space-between;
  }
}
</style>
